<template>
  <div>
    <el-button type="primary" @click="handleShowDialog">
      <slot></slot>
    </el-button>
    <el-dialog :title="props.title" v-model="dialogVisible">
      <el-scrollbar max-height="450px">
        <div class="icon-container">
          <div
            class="item"
            v-for="(item, index) in Object.keys(ElementPlusIconsVue)"
            :key="index"
            @click="handleCopy(item)"
          >
            <!-- 动态组件 -->
            <component :is="`el-icon${toLine(item)}`"></component>
            <div class="text">{{ item }}</div>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { toLine } from "@/utils/index.ts";
import { useCopy } from "@/hooks/useCopy";
const props = defineProps<{
  title: string;
  visible: boolean;
}>();

let dialogVisible = ref(props.visible);

const emits = defineEmits(["update:visible"]);

watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);

watch(
  () => dialogVisible.value,
  (newVal) => {
    emits("update:visible", newVal);
  }
);

function handleShowDialog() {
  // dialogVisible.value = !dialogVisible.value;
  emits("update:visible", !props.visible);
}

//复制功能
function handleCopy(name: string) {
  useCopy(`<el-icon${toLine(name)} />`);
}
</script>

<style lang="scss" scoped>
.icon-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: 25%;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: #409eff;
    }
    svg {
      width: 2em;
      height: 2em;
    }
    .text {
      margin-top: 10px;
      font-size: 14px;
    }
  }
}
</style>
